<template>
	<view class="myTracks">
		<u-navbar title="我的足迹"></u-navbar>
		<u-empty text="暂无历史记录" style="margin-top: 200rpx" mode="history" v-if="whetherEmpty"></u-empty>
		<div v-else>
			<view v-if="item" v-for="(item, index) in trackList" :key="index">
				<view class="myTracks-title" @click="navigateToStore(item)" v-if="item.storeName">{{ item.storeName }}</view>
				<view class="myTracks-items">
					<u-swipe-action style="width: 100%" :show="item.show" :index="index" :key="item.id" @click="delTracks" @open="open" :options="options">
						<!-- 已失效商品 -->
						<div class="myTracks-item lose-goods" v-if="!item.storeName && !item.goodsName && !item.price">已失效商品</div>
						<!-- 正常有效商品 -->
						<view v-else class="myTracks-item">
							<view class="myTracks-item-img" @click.stop="navigateToDetail(item)">
								<image :src="item.thumbnail"></image>
							</view>
							<view class="myTracks-item-content" @click.stop="navigateToDetail(item)">
								<view class="myTracks-item-title">
									{{ item.goodsName }}
									<view class="myTracks-item-title-desc"></view>
								</view>
								<view class="myTracks-item-price">￥{{ item.price | unitPrice }}</view>
							</view>
						</view>
					</u-swipe-action>
				</view>
				<view class="myTracks-divider"></view>
			</view>
		</div>
	</view>
</template>

<script>
import { myTrackList, deleteHistoryListId } from "@/api/members.js";

export default {
	data() {
		return {
			whetherEmpty: false, //是否数据为空
			params: {
				pageNumber: 1,
				pageSize: 10,
				order: "desc",
				sort: "updateTime"
			},
			options: [
				{
					text: "删除",
					style: {
						backgroundColor: "#dd524d"
					}
				}
			],
			trackList: [] //足迹列表
		};
	},

	/**
	 * 滑到底部加载下一页数据
	 */
	onReachBottom() {
		this.params.pageNumber++;
		this.getList();
	},
	onShow() {
		this.params.pageNumber = 1;
		this.trackList = [];
		this.getList();
	},
	onPullDownRefresh() {
		this.trackList = [];
		this.getList();
	},
	methods: {
		/**
		 * 导航到店铺
		 */
		navigateToStore(val) {
			uni.navigateTo({
				url: "/pages/product/shopPage?id=" + val.storeId
			});
		},
		open(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.trackList[index].show = true;
			this.trackList.map((val, idx) => {
				if (index != idx) this.trackList[idx].show = false;
			});
		},
		/**
		 * 跳转详情
		 */
		navigateToDetail(item) {
			uni.navigateTo({
				url: "/pages/product/goods?id=" + item.id + "&goodsId=" + item.goodsId
			});
		},

		/**
		 * 获取我的足迹列表
		 */
		getList() {
			uni.showLoading({
				title: "加载中"
			});
			myTrackList(this.params).then((res) => {
				uni.stopPullDownRefresh();
				if (this.$store.state.isShowToast) {
					uni.hideLoading();
				}
				if (res.statusCode == 200) {
					res.data.result.records.length &&
						res.data.result.records.forEach((item) => {
							item.show = false;
						});

					let data = res.data.result.records;
					if (data.total == 0) {
						this.whetherEmpty = true;
					} else {
						this.trackList.push(...data);
					}
				}
			});
		},

		/**
		 * 删除足迹
		 */
		delTracks(index) {
			deleteHistoryListId(this.trackList[index].goodsId).then((res) => {
				if (res.data.code == 200) {
					this.trackList = [];
					this.getList();
				} else {
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon: "none"
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.lose-goods {
	color: $main-color;
	padding-left: 50rpx !important;
}
.myTracks {
	width: 100%;
	padding-top: 2rpx;
}

.myTracks-title {
	width: 100%;
	height: 110rpx;
	padding-left: 20rpx;
	font-size: 28rpx;
	color: #666;
	font-weight: bold;
	background-color: #fff;
	align-items: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}

.myTracks-items {
	padding-top: 2rpx;
	align-items: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
}

.myTracks-item {
	width: 100%;
	height: 226rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	margin-bottom: 2rpx;
	// border-radius: 6/@px;
	background-color: #fff;
	position: relative;
	align-items: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}

.myTracks-item-img {
	margin-right: 20rpx;
	border-radius: 8rpx;

	image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 8rpx;
	}
}

.myTracks-item-title {
	font-size: 28rpx;
	color: #333;
}

.myTracks-item-title-desc {
	font-size: 28rpx;
	color: #999;
}

.myTracks-item-price {
	font-size: 28rpx;
	color: $light-color;
	padding: 10rpx 0 0 0;
}

.myTracks-divider {
	width: 100%;
	height: 20rpx;
}
</style>
